<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html> 
	<head>
		<title>测试</title> 
		<%@ include  file="/WEB-INF/oss/base/common/variable.jsp"%>
    	<%@ include  file="/WEB-INF/oss/base/common/resource_lib.jsp"%>
    	<%@ include  file="/WEB-INF/oss/base/common/variable_js.jsp"%>
    	
    	<link  href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css" rel="stylesheet">
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js"></script>
    	
    	<style type="text/css">
		
		img {
		  max-width: 100%;
		}
		
	</style>
	</head>
	<body>
		<p>this is function Test</p>
		
		<p> 图片上传 </p>
		
		<div>
			 <input type="file" class="crop-picker-file" 
			 		id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"></div>
		</div>
		<div style="width: 300px;height: 300px;">
			 <img src="" id="target" />
		</div>
		<div id="preview-pane">
		    <div class="preview-container">
		         <img src="" id="cut_thumb"/>
		    </div>
		</div>
		<div class="crop-operate">
			<button class="crop-save" onclick="rotate()">旋转</button>
	        <button class="crop-save" onclick="saveImage()">保存</button>
	    </div>
		
		
		
	</body>
	
	<script type="text/javascript">
		var $image = document.getElementById('target');
		var $copper ;
		
		$('[type=file]').change(function(e) {      
	        var file = e.target.files[0]
	        if(file.size>= 2*1024*1024){
	        	  alert("图片大于2M");
	        }
	        else{
	                var reader = new FileReader();
	                reader.readAsDataURL(file); 
	                reader.onload=function(e){
	                	$("#target").attr("src",e.target.result);
	                	$copper.reset();
	                	$copper.replace(e.target.result);
	                }
	                if(($('#target').attr('src').length) != 0){
	                     $('#preview').show()
	                     $('#preview-pane').show()
	                     $('.crop-operate').show()
	                } 
	            }
	    })
		
		$copper = new Cropper($image ,{
	        aspectRatio: 1 / 1,
	        cropBoxResizable: true
	   });
		
		function saveImage(){
			var $imgData = $copper.getCroppedCanvas({
				maxWidth: 300,
				maxHeight: 300
			});
			var dataurl = $imgData.toDataURL('image/jpeg');
			$("#cut_thumb").attr("src",dataurl);
		}
		
		function rotate(){
			$copper.rotate(45);
		}
	
	</script>
	
</html>
